"use client"

import { ZigenDisplay } from "./content/ZigenDisplay"
import { EvolutionHistory } from "./content/EvolutionHistory"
import { ExtensionDisplay } from "./content/ExtensionDisplay"
import { GamePractice } from "./content/GamePractice"
import { RadicalStrokeDisplay } from "./content/RadicalStrokeDisplay"
import { WritingTrainingDisplay } from "./content/WritingTrainingDisplay"
import { DragCombineDisplay } from "./content/DragCombineDisplay"
import { GameConsolidationDisplay } from "./content/GameConsolidationDisplay"
import { useState } from "react"

// 记忆口诀和联系方式配置
const MEMORY_TIPS: Record<string, string> = {
  "木": "木字形如树，一横两竖足，上端出小枝，下端接三根",
  "水": "水字三点水，右边四笔牵，二横一竖钩，中间夹折笔",
  "火": "火字四笔成，人字底边生，两点似星火，上下共四笔",
  "土": "土字结构简，十字去头看，上横长过头，下竖稳如山",
  "金": "金字八划写，两撇下两点，中间竖心戳，旁边立刀片",
}

// 默认联系方式
const DEFAULT_CONTACT = "岚小字"

interface LiveAreaProps {
  activeTab: string
  selectedContent: string
  currentLesson: {
    id: number
    title: string
    character: string
  }
}

export function LiveArea({ activeTab, selectedContent, currentLesson }: LiveAreaProps) {
  // 添加状态用于存储联系方式，实际使用时可以从后台API获取
  const [contactInfo, setContactInfo] = useState(DEFAULT_CONTACT)
  
  // 添加可以在界面上修改联系方式的功能（仅用于演示）
  const [isEditing, setIsEditing] = useState(false)
  const [tempContact, setTempContact] = useState(contactInfo)
  
  // 保存联系方式
  const saveContactInfo = () => {
    setContactInfo(tempContact)
    setIsEditing(false)
    // 在实际应用中，这里可以调用API将联系方式保存到后台
  }
  
  // 获取当前汉字的记忆口诀
  const getMemoryTip = (char: string) => {
    return MEMORY_TIPS[char] || `认识${char}字的基本结构和笔画`
  }

  const renderContent = () => {
    switch(activeTab) {
      case '首页':
        return (
          <div className="w-full h-full flex items-center justify-center">
            <div className="text-center">
              <div className="text-8xl font-black text-transparent bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text mb-6 animate-pulse">
                {currentLesson.character}
              </div>
              <h2 className="text-3xl font-bold text-purple-700 mb-4">
                {currentLesson.title}
              </h2>
              <p className="text-xl text-gray-600">
                点击下方工具开始学习
              </p>
            </div>
          </div>
        )
      
      case '字根学习':
        // 根据selectedContent显示不同的内容
        if (selectedContent === 'bihua') {
          return (
            <ExtensionDisplay 
              currentCourse={{
                lesson_number: currentLesson.id.toString(),
                course_name: currentLesson.title,
                target_char: currentLesson.character
              }}
            />
          )
        }
        if (selectedContent === 'lianxi') {
          return (
            <GamePractice 
              currentCourse={{
                lesson_number: currentLesson.id.toString(),
                course_name: currentLesson.title,
                target_char: currentLesson.character
              }}
            />
          )
        }
        // 如果没有选择内容，显示默认的字根学习界面
        return (
          <ZigenDisplay 
            selectedContent={selectedContent || 'zigen'} 
            currentChar={currentLesson.character}
          />
        )
      
      case '部首与笔画讲解':
        // 如果没有选择内容，默认选择第一个部首（木）
        let defaultRadical = selectedContent
        if (!selectedContent || selectedContent === 'hanzi') {
          // 根据当前字符确定默认部首
          const char = currentLesson.character
          if (char === '木') defaultRadical = '木'
          else if (char === '水') defaultRadical = '氵'
          else if (char === '火') defaultRadical = '火'
          else if (char === '土') defaultRadical = '土'
          else defaultRadical = '木' // 默认
        }
        
        return (
          <RadicalStrokeDisplay 
            currentCourse={{
              lesson_number: currentLesson.id.toString(),
              course_name: currentLesson.title,
              target_char: currentLesson.character
            }}
            selectedRadical={defaultRadical}
          />
        )
      
      case '书写观察与训练':
        return (
          <WritingTrainingDisplay 
            currentCourse={{
              lesson_number: currentLesson.id.toString(),
              course_name: currentLesson.title,
              target_char: currentLesson.character
            }}
            selectedContent={selectedContent || 'guancha'}
          />
        )
      
      case '拖拽组合':
        return (
          <DragCombineDisplay 
            currentCourse={{
              lesson_number: currentLesson.id.toString(),
              course_name: currentLesson.title,
              target_char: currentLesson.character
            }}
          />
        )
      
      case '游戏巩固':
        return (
          <GameConsolidationDisplay 
            currentCourse={{
              lesson_number: currentLesson.id.toString(),
              course_name: currentLesson.title,
              target_char: currentLesson.character
            }}
          />
        )
      
      case '结束页':
        return (
          <div className="w-full h-full flex flex-col items-center justify-center space-y-8">
            <div className="text-center">
              <div className="text-6xl mb-4">🎉</div>
              <h3 className="text-2xl font-bold text-indigo-700 mb-2">学习完成</h3>
              <p className="text-gray-600 mb-6">恭喜完成本课学习！</p>
              
              <div className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100 max-w-md mx-auto">
                <h4 className="text-lg font-bold text-purple-700 mb-3">本课学习资料</h4>
                <p className="text-gray-600 mb-4">
                  《{currentLesson.title}》完整练习字帖，内含:
                </p>
                <ul className="text-left text-gray-600 mb-6 space-y-2 pl-4">
                  <li className="flex items-center"><span className="text-purple-500 mr-2">✓</span> 字根结构拆解</li>
                  <li className="flex items-center"><span className="text-purple-500 mr-2">✓</span> 部首与笔画练习</li>
                  <li className="flex items-center"><span className="text-purple-500 mr-2">✓</span> 标准字形描红</li>
                  <li className="flex items-center"><span className="text-purple-500 mr-2">✓</span> 组字规律总结</li>
                </ul>
                
                <div className="bg-purple-50 p-4 rounded-xl mb-4">
                  <div className="flex justify-between items-center mb-2">
                    <p className="text-purple-700 font-medium">本课记忆口诀：</p>
                    
                    {/* 仅在管理员模式下显示编辑按钮，实际应用中可以根据权限控制 */}
                    <button 
                      onClick={() => setIsEditing(!isEditing)}
                      className="text-xs text-purple-600 hover:text-purple-800 transition-colors duration-200"
                    >
                      {isEditing ? '取消' : '编辑'}
                    </button>
                  </div>
                  
                  {/* 记忆口诀内容 */}
                  <p className="text-gray-700 italic mb-4">
                    "{getMemoryTip(currentLesson.character)}"
                  </p>
                  
                  {/* 联系方式区域 */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center text-gray-600">
                      <span className="mr-2 text-sm">学习顾问：</span>
                      
                      {isEditing ? (
                        <div className="flex items-center">
                          <input
                            type="text"
                            value={tempContact}
                            onChange={(e) => setTempContact(e.target.value)}
                            className="border border-purple-200 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-purple-400"
                            placeholder="输入联系方式"
                          />
                          <button 
                            onClick={saveContactInfo}
                            className="ml-2 text-xs bg-purple-500 text-white px-2 py-1 rounded hover:bg-purple-600 transition-colors duration-200"
                          >
                            保存
                          </button>
                        </div>
                      ) : (
                        <span className="font-medium text-purple-800">{contactInfo}</span>
                      )}
                    </div>
                    
                    <div className="text-2xl font-bold text-purple-800">{currentLesson.character}</div>
                  </div>
                </div>
                
                <button className="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-semibold hover:from-purple-700 hover:to-purple-800 transition-all duration-300 flex items-center justify-center gap-2">
                  <span>预览字帖样例</span>
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        )
      
      default:
        return (
          <div className="w-full h-full flex items-center justify-center">
            <div className="text-center text-gray-500">
              <div className="text-6xl mb-4">📚</div>
              <p>选择一个学习模块开始</p>
            </div>
          </div>
        )
    }
  }

  return (
    <div className="w-full h-full relative">
      {renderContent()}
    </div>
  )
} 